<template>
		<div class="mineCollect-box">
            <Header :headerObj = 'headerObj'></Header>
			<ul v-if="collectArray.length>0">
				<li v-for="(v,index) of collectArray" @click="clickCollect(v)" :key="index">
					<img class="mineCollect-img" :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_134,w_250'" />
					<div class="mineCollect-right">
						<p class="mineCollect-tip">{{v.title}}</p>
						<!--<p class="mineAttention-name">{{v.orgName}}</p>-->
					</div>
				</li>
			</ul>
			<!--没有收藏-->
			<div v-else class="noCollect-box"></div>
		</div>
</template>
<script>
	import fun from "../../util/function";
	export default {
		data() {
			return {
				collectArray: [],
			    tipImg: false,
				page: 1,
				getPlatform: fun.getPlatform(), //app wx
				headerObj:{
				'isShowBack':true,
				'isShowClose':false,
				'isShowMine':false,
				'fromType':'mine',
				'titleText':'我的收藏',
				'color':'#27344B'
			},
			}
		},
		created: function() {
			this.getCollectListData()
			this.dotNumPage(); //页面打点
		},
		mounted: function() {
			this.$store.dispatch("hideNav");
			let _this = this;
			window.onscroll= function() {
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //293
				let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //667				
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //960
				//console.log('scrollTop' + scrollTop + 'windowHeight' + windowHeight + 'scrollHeight' + scrollHeight)
				if(scrollTop + windowHeight + 1 >= scrollHeight && _this.scrollSwitch) {
					_this.page++;
					_this.scrollSwitch = false;
					_this.getCollectListData();
				}
			}
		},
		methods: {
			dotNumPage() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "mineCollect_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app 游客为web
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			getCollectListData(){//收藏列表
				this.$http.post("/h5live/getScList?p="+this.page)
					.then(res => {
						if (res.data.code == "000000") {
							   this.scrollSwitch = true;
							if(res.data.data.length < 10){
								this.scrollSwitch = false;
							}
							this.collectArray =[...this.collectArray,...res.data.data];
							if(this.collectArray.length=='0'){
								this.tipImg = true
							}
						} else {}
					})
					.catch(response => {
						//console.log(response);
					});
			},
			clickCollect(v){//scType 1 视频，2房间, 3课程
				if(v.scType === 1){
					this.$router.push(`/${this.$channel}/liveBack/${v.vid}?dzhPage=true`);
				}else if(v.scType === 2){
					this.$router.push(`/${this.$channel}/liveRoom/${v.vid}?dzhPage=true`);
					window.sessionStorage.setItem(this.$channel+'enterLiveType','mine')
				} else if (v.scType === 3) {
					// 查询课程信息
					this.$http.get("/h5live/course/getCourseInfo", {
						params: {
							courseId: v.vid,
						},
					}).then(res => {
						this.loading = false;
						if(res.data.code === "000000") {
							fun.handleEnterCourse(res.data.data)
						} else {
							return Promise.reject(res.data);
						}
					}).catch(err => {
						fun.toastMessage('获取课程明细失败');
						console.error(err);
					});
				}
			},
		}
	}
</script>
<style scoped="scoped">
	.noCollect-box {
		width: 687px;
		height: 389px;
		background: url(../../assets/images/noCollect.png) no-repeat;
		background-size: 687px 389px;
		position: absolute;
		top: 350px; 
		left:calc((100% - 687px)/2)

	}

	.mineCollect-box {
		width: 100%;
		height: 100%;
		background: white;
	}

	.mineCollect-box .header-conatiner-zxyhIos+ul {

		height: calc(100vh - 140px);
	}

	.mineCollect-box ul {
		width: 100%;
		height: calc(100vh - 88px);
		overflow-y: scroll;
		/* margin-top: 88px; */
	}

	.mineCollect-box ul li {
		width: 690px;
		height: 184px;
		/*background:#C4C4C4;*/
		float: left;
		border-bottom: 2px solid #F3F3F3;
		margin-left: 30px;
	}

	.mineCollect-img {
		width: 250px;
		height: 134px;
		float: left;
		margin: 25px 0 0 0;
		border-radius: 10px;
	}

	.mineCollect-right {
		margin-left: 310px;
	}

	.mineCollect-tip {
		font-size: 28px;
		font-weight: 400;
		color: #0C0C0C;
		margin-top: 50px;
		width: 400px;
		line-height: 30px;
	}

	.mineCollect-name {
		font-size: 24px;
		font-weight: 500;
		color: rgba(190, 190, 190, 1);
		margin-top: 20px;
	}

	.header-conatiner {
		position: relative !important;
		left: 0px;
		top: 0px;
	}
</style>
